.stepss {
    margin-left: -60px !important;

    :global {
        .ant-steps-item-content {
            width: 145px;
        }

        .ant-steps-item-icon {
            margin-left: 60px !important;
        }

        .ant-steps-item-tail {
            margin-left: 72px;
        }

        .ant-steps-item-content .ant-steps-item-title {
            font-size: 13px;
        }
    }
}

.stepsbox {
    display        : flex;
    justify-content: space-around;
    margin         : 20px 0;
}

.stepssuccess {
    position       : relative;
    display        : flex;
    justify-content: center;
    flex-direction : column;
    align-items    : center;
    cursor         : pointer;

    .stepssuccessbj {
        display         : inline-block;
        width           : 34px;
        height          : 34px;
        font-size       : 12px;
        line-height     : 34px;
        text-align      : center;
        border-radius   : 34px;
        background-color: #1890ff;

        span {
            color      : #fff;
            position   : relative;
            top        : 3px;
            line-height: 1;
        }
    }

    .stepssuccesslux1,
    .stepssuccesslux2,
    .stepssuccesslux3,
    .stepssuccesslux4,
    .stepssuccesslux5,
    .stepssuccesslux6,
    .stepssuccesslux7 {
        position        : absolute;
        left            : 0;
        top             : 18px;
        margin-left     : 71px;
        height          : 1px;
        background-color: #1890ff;
        width           : 100%;
        box-sizing      : border-box;
    }

    .stepssuccesscontent {
        margin-top: 8px;
        text-align: center;

        div {
            font-size  : 13px;
            color      : rgba(0, 0, 0, 0.65);
            line-height: 34px;
        }
    }
}


.stepsinfo {
    position       : relative;
    display        : flex;
    justify-content: center;
    flex-direction : column;
    align-items    : center;
    cursor         : pointer;

    .stepsinfobj {
        display         : inline-block;
        width           : 34px;
        height          : 34px;
        font-size       : 12px;
        line-height     : 32px;
        text-align      : center;
        border-radius   : 34px;
        background-color: #fff;
        border          : 1px solid #A8A2A2;

        span {
            display         : inline-block;
            position        : relative;
            top             : 3px;
            line-height     : 1;
            width           : 12px;
            height          : 12px;
            border-radius   : 12px;
            background-color: #fff;
            border          : 1px solid #A8A2A2;

        }
    }

    .stepsinfolux1,
    .stepsinfolux2,
    .stepsinfolux3,
    .stepsinfolux4,
    .stepsinfolux5,
    .stepsinfolux6,
    .stepsinfolux7 {
        position        : absolute;
        left            : 0;
        top             : 18px;
        margin-left     : 71px;
        height          : 1px;
        background-color: #A8A2A2;
        width           : 100%;
        box-sizing      : border-box;
    }

    .stepsinfocontent {
        margin-top: 8px;
        text-align: center;

        div {
            font-size  : 13px;
            color      : rgba(0, 0, 0, 0.45);
            line-height: 34px;
        }
    }
}

.connect {
    padding         : 20px;
    border-radius   : 15px;
    // border       : 2px solid rgba(63, 81, 181, 1);
    border          : 2px solid;
    border-color    : #1890ff;
    position        : relative;

    .icono,
    .icont,
    .icons,
    .iconf,
    .iconr,
    .icona,
    .iconq {
        position : absolute;
        top      : -22px;
        font-size: 30px;
        color    : #1890ff;
        left     : 22px;
    }
}


@media screen and (max-width:1300px) and (min-width:1000px) {
    .icono {
        left: 22px !important;
    }

    .icont {
        left: 130px !important;
    }

    .icons {
        left: 282px !important;
    }

    .iconf {
        left: 428px !important;
    }

    .iconr {
        left: 560px !important;
    }

    .icona {
        left: 698px !important;
    }

    .iconq {
        left: 830px !important;
    }

    .stepssuccesslux1,
    .stepsinfolux1 {
        margin-left: 53px !important;
        width      : 100% !important;
    }

    .stepssuccesslux2,
    .stepsinfolux2 {
        margin-left: 80px !important;
        width      : 86% !important;
    }

    .stepssuccesslux3,
    .stepsinfolux3 {
        margin-left: 100px !important;
        width      : 60% !important;
    }

    .stepssuccesslux4,
    .stepsinfolux4 {
        margin-left: 72px !important;
        width      : 86% !important;
    }

    .stepssuccesslux5,
    .stepsinfolux5 {
        margin-left: 82px !important;
        width      : 78% !important;
    }

    .stepssuccesslux6,
    .stepsinfolux6 {
        margin-left: 77px !important;
        width      : 77% !important;
    }

    .stepssuccesslux7,
    .stepsinfolux7 {
        display:none;
    }
}

@media screen and (max-width:1500px) and (min-width:1300px) {
    .icono {
        left: 34px !important;
    }

    .icont {
        left: 163px !important;
    }

    .icons {
        left: 338px !important;
    }

    .iconf {
        left: 506px !important;
    }

    .iconr {
        left: 662px !important;
    }

    .icona {
        left: 822px !important;
    }

    .iconq {
        left: 978px !important;
    }

    .stepssuccesslux1,
    .stepsinfolux1 {
        margin-left: 53px !important;
        width      : 135% !important;
    }

    .stepssuccesslux2,
    .stepsinfolux2 {
        margin-left: 80px !important;
        width      : 110% !important;
    }

    .stepssuccesslux3,
    .stepsinfolux3 {
        margin-left: 100px !important;
        width      : 75% !important;
    }

    .stepssuccesslux4,
    .stepsinfolux4 {
        margin-left: 72px !important;
        width      : 108% !important;
    }

    .stepssuccesslux5,
    .stepsinfolux5 {
        margin-left: 82px !important;
        width      : 94% !important;
    }

    .stepssuccesslux6,
    .stepsinfolux6 {
        margin-left: 77px !important;
        width      : 94% !important;
    }

    .stepssuccesslux7,
    .stepsinfolux7 {
        display:none;
    }
}


@media screen and (max-width:1800px) and (min-width:1500px) {
    .icono {
        left: 52px !important;
    }

    .icont {
        left: 216px !important;
    }

    .icons {
        left: 423px !important;
    }

    .iconf {
        left: 626px !important;
    }

    .iconr {
        left: 815px !important;
    }

    .icona {
        left: 1012px !important;
    }

    .iconq {
        left: 1200px !important;
    }
    .stepssuccesslux1,
    .stepsinfolux1 {
        margin-left: 53px !important;
        width      : 192% !important;
    }

    .stepssuccesslux2,
    .stepsinfolux2 {
        margin-left: 80px !important;
        width      : 140% !important;
    }

    .stepssuccesslux3,
    .stepsinfolux3 {
        margin-left: 100px !important;
        width      : 100% !important;
    }

    .stepssuccesslux4,
    .stepsinfolux4 {
        margin-left: 72px !important;
        width      : 140% !important;
    }

    .stepssuccesslux5,
    .stepsinfolux5 {
        margin-left: 82px !important;
        width      : 120% !important;
    }

    .stepssuccesslux6,
    .stepsinfolux6 {
        margin-left: 77px !important;
        width      : 120% !important;
    }

    .stepssuccesslux7,
    .stepsinfolux7 {
       display:none;
    }
}

@media screen and (max-width:2000px) and (min-width:1800px) {
    .icono {
        left: 68px !important;
    }

    .icont {
        left: 268px !important;
    }

    .icons {
        left: 510px !important;
    }

    .iconf {
        left: 748px !important;
    }

    .iconr {
        left: 972px !important;
    }

    .icona {
        left: 1202px !important;
    }

    .iconq {
        left: 1424px !important;
    }
    .stepssuccesslux1,
    .stepsinfolux1 {
        margin-left: 53px !important;
        width      : 238% !important;
    }

    .stepssuccesslux2,
    .stepsinfolux2 {
        margin-left: 80px !important;
        width      : 160% !important;
    }

    .stepssuccesslux3,
    .stepsinfolux3 {
        margin-left: 100px !important;
        width      : 115% !important;
    }

    .stepssuccesslux4,
    .stepsinfolux4 {
        margin-left: 72px !important;
        width      : 160% !important;
    }

    .stepssuccesslux5,
    .stepsinfolux5 {
        margin-left: 82px !important;
        width      : 140% !important;
    }

    .stepssuccesslux6,
    .stepsinfolux6 {
        margin-left: 77px !important;
        width      : 140% !important;
    }

    .stepssuccesslux7,
    .stepsinfolux7 {
       display:none;
    }
}